<template>
  <div class="tab-bar">
    <!-- <template v-for="(tabbarItem, index) in tabbarData">
      <div
        class="tab-bar-item"
        :class="{ active: currentIndex === index }"
        @click="itemClick(index, tabbarItem)"
      >
        <img
          v-if="currentIndex !== index"
          :src="getAssetUrl(tabbarItem.image)"
        />
        <img v-else :src="getAssetUrl(tabbarItem.imageActive)" />
        <span>{{ tabbarItem.text }}</span>
      </div>
    </template> -->

    <van-tabbar active-color="#ff9854" v-model="currentIndex">
      <template v-for="(tabbarItem, index) in tabbarData">
        <van-tabbar-item :to="tabbarItem.path">
          <span>{{ tabbarItem.text }}</span>
          <!-- 插槽 :实现自定义图标-->
          <template #icon="props">
            <img
              v-if="currentIndex !== index"
              :src="getAssetUrl(tabbarItem.image)"
            />
            <img v-else :src="getAssetUrl(tabbarItem.imageActive)" />
          </template>
        </van-tabbar-item>
      </template>
    </van-tabbar>
  </div>
</template>

<script setup>
import { ref } from "vue";
import tabbarData from "@/assets/data/tabbar.js";
import getAssetUrl from "@/utils/get_assets_image.js";

const currentIndex = ref(0);
</script>

<style lang="less" scoped>
.tab-bar {
  // 第一种:局部定义一个变量，只针对tabbar.vue才生效
  // --van-tabbar-item-icon-size: 60px !important;

  // 第二种:找到类，对对应的类中进行css属性重写
  // 找到子组件进行生效
  // :deep(.van-tabbar-item__icon) {
  //   font-size: 50px;
  // }
  margin-top: 50px;

  img {
    height: 28px;
  }
}
</style>
